<template>
  <div ref="map" id="china_map_box">
    <div id="china_map"></div>
  </div>
</template>

<script>
export default {
  name: "about",
  data() {
    return {};
  },
  mounted() {
    this.setMapData();
  },
  methods: {
    setMapData() {
      this.loadMap("china", "中国", {
        code: 100000,
        isFull: true,
      });
    },
    getAreaMap(areaCode, isFull) {
      return this.$axios
        .get(
          "http://42.192.232.58:3000/proxy/areas_v2/bound/" +
            areaCode +
            (isFull ? "_full" : "") +
            ".json?proxy_key=7f297416175d8b022098ded9548eb276"
        )
        .then(function (res) {
          return Promise.resolve(res.data);
        });
    },
    loadMap(map, name, { code, isFull }) {
      // 地图缓存数据
      let chart = this.$echarts.init(this.$refs.map);
      let mapCaches = {};
      // 点击进入下一级时，其父级的地图数据对象集合
      let promise = Promise.resolve();

      if (!mapCaches[map]) {
        promise = this.getAreaMap(code, isFull).then((mapData) => {
          console.log(mapData);
          this.$echarts.registerMap(map, mapData);

          mapCaches[map] = mapData;
        });
      }

      promise.then(() => {
        const option = {
          title: {
            text: name,
            left: "center",
          },
          series: [
            {
              name: name,
              type: "map",
              map,
              roam: true, // 是否开启鼠标缩放和平移漫游
              itemStyle: {
                // 地图区域的多边形 图形样式
                normal: {
                  // 是图形在默认状态下的样式
                  label: {
                    show: true, //是否显示标签
                    textStyle: {
                      color: "rgba(255,255,255,0)",
                    },
                  },
                },
              },
              aspectScale: map === "china" ? 0.75 : 1,
              top: "10%", //组件距离容器的距离
            },
          ],
        };
        // 清空echarts实例
        chart.clear();
        chart.setOption(option);
        // 解绑事件
        chart.off("click");
        chart.off("dblclick");
      });
    },
  },
};
</script>

<style scoped>
#china_map_box {
  height: 100%;
  position: relative;
}
#china_map_box #china_map {
  height: 100%;
}
#china_map_box .china_map_logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 45px;
}
</style>
